<template>
	<view class="login-content">
		<!-- 鸽子管理系统图标 -->
		<view class="logo-section">
			<view class="pigeon-icon">
				<view class="pigeon-body"></view>
				<view class="pigeon-wing"></view>
				<view class="pigeon-head"></view>
			</view>
			<view class="system-name">鸽子管理系统</view>
		</view>
		
		<view class="login-title">
			登录
		</view>
		<view class="iphone">
			<input type="text" placeholder="请输入用户名" :value="username" @input="clearInput" />
			<uni-icons type="closeempty" color="#808080" size="36" v-if="showClearIcon" @click="clearIcon"></uni-icons>
		</view>
		<view class="password">
			<input placeholder="请输入密码" v-model="passwordValue" :password="showPassword" />
			<uni-icons type="eye-filled" color="#808080" size="36" @click="changePassword"></uni-icons>
		</view>
		<view class="login-btn" @click="Login()">登录</view>
		<!-- 顶部提示 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		reqLogin
	} from '@/api/index.js'
	import Cookie from '@/utils/cookie.js'
	export default {
		data() {
			return {
				username: '', //用户名
				passwordValue: '', //密码
				showPassword: true, //是否显示密码
				showClearIcon: false, //是否显示清除按钮
				token: ''
			}
		},
		methods: {
			// 显示隐藏密码
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			// 判断是否显示清除按钮
			clearInput: function(event) {
				this.username = event.detail.value;
				if (event.detail.value.length > 0) {
					this.showClearIcon = true;
				} else {
					this.showClearIcon = false;
				}
			},
			// 清除内容/隐藏按钮
			clearIcon: function() {
				this.username = '';
				this.showClearIcon = false;
			},
			// 密码登录
			Login() {
				let that = this
				//当用户名为空时
				if (!that.username) {
					uni.showToast({
						title: '请输入用户名',
						icon: 'none'
					})
					return false
				}
				// 当未输入密码时
				if (!that.passwordValue) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return false
				}
				this.$loading()
				const params = {
					username: this.username,
					password: this.passwordValue
				}
				console.log('./././././././')
				reqLogin(params).then((resp) => {
					//这里的Cookie本质就是uni.setStorageSync() 为util封装的方法 使用时要引入Cookie
					console.log('resp', resp)
					this.$hide()
					Cookie.set('ROLE', resp.data.role)
					Cookie.set('canghao', resp.data.canghao)
					Cookie.set('tureToken', resp.token)
					if(resp.data.canghao !== 0){
						Cookie.set('siteId',resp.data.canghao)	
					}else{
						Cookie.set('siteId','0')	//siteid是一个vuex状态，改的是siteid状态
					}
					this.$store.commit('SET_TOKEN', resp.data.role)
					this.$store.commit('SET_TRUETOKEN',resp.token)
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					uni.reLaunch({
						url: '/pages/index/index'
					})
					//置左上角仓号为登录的账号
					if(uni.getStorageSync('canghao') ==0){
						this.$store.commit('SETOPESITEID',0)	//改的是operationSiteId状态
					}else{
						this.$store.commit('SETOPESITEID',uni.getStorageSync('canghao'))
					}
					// 在登录成功的then回调中添加
					this.$store.commit('SET_ALL_SITES', resp.allSites);
					// 确保普通员工也有仓库列表数据（至少包含自己的siteId）
					if (resp.data.canghao !== 0 && (!resp.allSites || resp.allSites.length === 0)) {
					  this.$store.commit('SET_ALL_SITES', [resp.data.canghao]);
					}
					// console.log(Cookie.get('ROLE'))
				}).catch((resp)=>{
					this.$refs.uToast.show({
						title: '用户名或密码错误',
						type: 'error',
						duration:'800',
						position: 'top'
					})
				})
			},
			// 下面是可以封装起来引入的部分
			// 判断是否是正确的手机号码
			isMobile(str) {
				let reg = /^1\d{10}$/;
				return reg.test(str)
			},
		}
	}
</script>

<style scoped>
	.login-content {
		width: 100%;
		padding: 100rpx 20rpx 70rpx;
		text-align: center;
		color: #2c5c8f;
		background: linear-gradient(135deg, #e6f2ff 0%, #d1e5f7 100%);
		min-height: 100vh;
	}

	/* 鸽子管理系统图标样式 */
	.logo-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 40rpx;
	}
	
	.pigeon-icon {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}
	
	.pigeon-body {
		position: absolute;
		width: 80rpx;
		height: 60rpx;
		background: #4a7daa;
		border-radius: 50%;
		top: 30rpx;
		left: 20rpx;
		transform: rotate(-10deg);
	}
	
	.pigeon-wing {
		position: absolute;
		width: 60rpx;
		height: 40rpx;
		background: #2c5c8f;
		border-radius: 50%;
		top: 20rpx;
		left: 10rpx;
		transform: rotate(15deg);
	}
	
	.pigeon-head {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		background: #2c5c8f;
		border-radius: 50%;
		top: 15rpx;
		left: 65rpx;
	}
	
	.system-name {
		font-size: 36rpx;
		font-weight: bold;
		color: #2c5c8f;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.login-title {
		font-size: 52rpx;
		font-weight: bold;
		margin-bottom: 62rpx;
		color: #2c5c8f;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.login-content input {
		height: 100rpx;
		background: #f0f8ff;
		border-radius: 50rpx;
		text-align: left;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		border: 2rpx solid #d1e5f7;
		color: #2c5c8f;
		transition: all 0.3s ease;
	}

	.login-content input:focus {
		border-color: #4a7daa;
		background: #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(74, 125, 170, 0.2);
	}

	.login-content input::placeholder {
		color: #8bacc0;
	}

	.iphone,
	.password,
	.test {
		position: relative;
		margin-bottom: 60rpx;
	}

	.iphone .uni-icons,
	.password .uni-icons {
		position: absolute;
		top: 36rpx;
		right: 60rpx;
	}

	.test-btn,
	.password-btn {
		color: #4a7daa;
		font-size: 30rpx;
		text-align: right;
	}

	.get-test {
		color: #4a7daa;
		font-size: 30rpx;
		width: 244rpx;
		height: 100rpx;
		border: 1px solid #4a7daa;
		border-radius: 50rpx;
		line-height: 100rpx;
	}

	.test {
		display: flex;
		justify-content: space-between;
	}

	.login-btn {
		position: absolute;
		left: 50%;
		transform: translate(-50%);
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(135deg, #4a7daa 0%, #2c5c8f 100%);
		border-radius: 72rpx;
		color: #fff;
		font-size: 40rpx;
		text-align: center;
		line-height: 90rpx;
		position: fixed;
		bottom: 120rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(44, 92, 143, 0.3);
		transition: all 0.3s ease;
	}

	.login-btn:active {
		transform: translate(-50%) scale(0.98);
		box-shadow: 0 4rpx 10rpx rgba(44, 92, 143, 0.3);
	}
</style>